<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 适配 IE-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 监测设备的宽度-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hi,bootstrap</title>
    <!-- 引入 bootStrap 的样式-->
    <link href="/js/bootstrap3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<h1 align="center">Hi,Maker Welcome to Bootstrap World</h1>

<div class="container theme-showcase">
    <div class="page-header">
        <h2>Buttons</h2>
    </div>
    <button class="btn-default">Default</button>
    <button class="btn-primary">Primary</button>
    <button class="btn-success">Success</button>
    <button class="btn-info">Info</button>
    <button class="btn-warning">Warning</button>
    <button class="btn-danger">df-Danger</button>
    <button class="btn-link">Link</button>
    <button class="btn btn-lg btn-danger">lg-Danger</button>
    <button class="btn btn-sm btn-danger">sm-Danger</button>
    <button class="btn btn-xs btn-danger">xs-Danger</button>

    <!-- table-->
    <div class="page-header">
        <h2>Table</h2>
    </div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <td>#</td>
            <td>FirstName</td>
            <td>LasteName</td>
            <td>Username</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td rowspan="2">1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>Otto</td>
            <td>@TwBootstrap</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
    <!-- condensed 没有竖线的-->
    <table class="table table-condensed">
        <thead>
        <tr>
            <td>#</td>
            <td>FirstName</td>
            <td>LasteName</td>
            <td>Username</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
    <!-- table-striped 有条纹的,各行换色-->
    <table class="table table-striped">
        <thead>
        <tr>
            <td>#</td>
            <td>FirstName</td>
            <td>LasteName</td>
            <td>Username</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>

    <!-- 占位图-->
    <div class="page-header">
        <h2>Thumbnails</h2>
    </div>
    <img src="/pic/thumb.svg" class="img-thumbnail" alt="200x200">

    <!--Labels-->
    <div class="page-header">
        <h2>Labels</h2>
    </div>
    <h1>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
    </h1>
    <h2><span class="label label-danger">Danger</span></h2>
    <h3><span class="label label-danger">Danger</span></h3>
    <h4><span class="label label-danger">Danger</span></h4>
    <h5><span class="label label-danger">Danger</span></h5>

    <!--带气泡-->
    <div class="page-header">
        <h2>Badges</h2>
    </div>
    <a href="#">
        Link
        <span class="badge">42</span>
    </a>
    <ul class="nav nav-pills" role="tablist">
        <li role="presentation" class="active">
            <a>
                Home
                <span class="badge">42</span>
            </a>
        </li>
        <li role="presentation">
            <a>Profile</a>
        </li>
        <li>
            <a>
                Message
                <span class="badge">3</span>
            </a>
        </li>
    </ul>
</div>

<!-- 先引入 jQuery-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 引入 bootstrap-->
<script src="/js/bootstrap3.3.7/js/bootstrap.min.js"></script>

</body>
</html>